import { defineStore } from 'pinia'
import Center from '@/layout/center/center.vue'
// 获取菜单接口
import { getMenuListApi } from '@/api/menu/menu'
import { RouteRecordRaw } from 'vue-router'
import Layout from '@/layout/Index.vue'
const modules = import.meta.glob('../view/**/*.vue')
export interface MenuState {
  menuList: any
}
// 定义store
export const menuStore = defineStore('menuStore', {
  state: (): MenuState => {
    return {
      menuList: [
        {
          path: '/',
          component: Layout,
          name: 'dashboard',
          redirect: '/dashboard',
          meta: {
            title: "首页",
            icon: "dashboard"
          },
          children: [
            {
              path: '/dashboard',
              component: () => import('@/view/dashboard/Index.vue'),
              name: 'dashboardIndex',
              meta: {
                title: '首页',
                icon: 'dashboard'
              }
            }
          ]
        }
      ]
    }
  },
  actions: {
    getMenuList(router: any) {
      return new Promise((resolve, reject) => {
        getMenuListApi().then(async res => {
          let accessedRoutes;
          if (res.code == 200) {
            //动态生成路由
            const ress = await deepCloneWithChildren(res.data)
            
            accessedRoutes = filterAsyncRoutes(ress, router);
            //设置到menuList
            this.menuList = this.menuList.concat(accessedRoutes)
          }
          //返回
          resolve(accessedRoutes);
        }).catch(error => {
          reject(error)
        })
      })
    }
  },
  getters: {
  }
  // },
  // persist: {
  //   storage: sessionStorage,
  //   paths: ['menuList'],
  // }
})
export function deepCloneWithChildren(data) {
  const res: Array<RouteRecordRaw> = [];
  data.map((item) => {
    const tmp = { ...item }
    const copyName = item.name
    if (tmp.nodeType === 1 && tmp.parentId == '0') {
      tmp.component = Layout;
      tmp.path = tmp.router
      tmp.name = tmp.code
      tmp.meta = {
        title: copyName,
        icon: tmp.nodeIcon
      }
      if (tmp.router === '/') {
        tmp.redirect = '/dashboard'
      }
    } else if (tmp.nodeType === 1 && tmp.parentId != '0') {
      tmp.component = Center
      tmp.path = tmp.router
      tmp.name = tmp.code
      tmp.meta = {
        title: copyName,
        icon: tmp.nodeIcon
      }
    } else if (tmp.nodeType === 2) {
      
      
      tmp.component = modules[`../view${tmp.router}.vue`]
      tmp.path = tmp.router
      tmp.name = tmp.code
      tmp.meta = {
        title: copyName,
        icon: tmp.nodeIcon
      }
    }

    if (tmp.children && tmp.children.length === 0) {
      delete tmp.children;
    }
    // 修改属性
    if (tmp.children && tmp.children.length > 0) {
      tmp.children = deepCloneWithChildren(tmp.children)
    }
    res.push(tmp)
  })

  return res
}
export function filterAsyncRoutes(routes: any[], router: any) {

  // const res: Array<RouteRecordRaw> = []
  const res: Array<any> = []
  routes.map((route: any, index: number) => {
    const tmp = { ...route }
    if (tmp.children && tmp.children.length > 0) {
      tmp.children = filterAsyncRoutes(tmp.children, router)
    }
    router.addRoute(tmp)
    res.push(tmp)
  })
  return res
}